/**
 * 型体页顶部组件
 */
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import { useModelStore } from '@/stores/model'
import http from '@/axios/http'

const route = useRoute()
const model = ref(route.query.model)

const modelStore = useModelStore()

// 获取当前时间
let now = new Date()
let year = now.getFullYear()
let month = now.getMonth() < 9 ? "0" + (now.getMonth() + 1) : now.getMonth() + 1
let date = now.getDate() < 10 ? "0" + now.getDate() : now.getDate()
let hour = now.getHours() < 10 ? "0" + now.getHours() : now.getHours()
let minute = now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes()
let second = now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds()
let dateTime = ref(year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second)

let timer = null;

function getModelList() {
  http.post('/model/getModelList')
  .then(res => {
    modelStore.setData(res.data)
  }).catch(err => {
    console.log(err)
  })
}

onMounted(() => {
  // 每秒更新时间
  timer = setInterval(() => {
    now = new Date()
    year = now.getFullYear()
    month = now.getMonth() < 9 ? "0" + (now.getMonth() + 1) : now.getMonth() + 1
    date = now.getDate() < 10 ? "0" + now.getDate() : now.getDate()
    hour = now.getHours() < 10 ? "0" + now.getHours() : now.getHours()
    minute = now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes()
    second = now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds()
    dateTime.value = year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second
  }, 1000)

  getModelList()
})

onUnmounted(() => {
  clearInterval(timer)
})
</script>

<template>
  <div class="model-head-container">
    <div class="model-head-left">
      <span>STELLA IE Productivity</span>

      <div @click="modelStore.show()" class="model-select">
        {{ model }}
      </div>
    </div>

    <div class="model-head-right">
      <span>{{ dateTime }}</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.model-head-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  font-size: 3vh;
  font-weight: normal;

  .model-select {
    display: inline-block;
    margin-left: 1.5vw;
    padding: 0.5vh 1vw;
    border-radius: 1vh;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.3);
    transition: all 0.25s ease-in-out;
    
    &:hover{
      box-shadow: 0 0 10px white;
    }
  }
}
</style>